<template>
  <h1>工具函数</h1>
</template>

<script setup>
import { isReactive, isReadonly, shallowRef, toRaw, triggerRef, watchEffect, watchPostEffect } from "vue";
import { isProxy, isRef, reactive, readonly, ref, shallowReactive, shallowReadonly, toRef, toRefs, unref } from "vue";

let num = ref(10);
console.log(isRef(num)); // true
let obj = ref({num: 10});
console.log(isRef(obj)); // true
let num2 = 10;
console.log(unref(num)); // 10
console.log(unref(num2)); // 10

let people = reactive({ age: 27 });
let age = toRef(people, 'age');
age.value += 1;
console.log(people.age); // 28
people.age +=1 ;
console.log(age.value); // 29

let cat = reactive({ name: 'yfc', age: 1 });
let { name, age: age1 } = toRefs(cat);
console.log(name.value, age1.value) // yfc 1

console.log('------isProxy------')

const readOnlyValue = readonly({});
let shallowReactiveValue = shallowReactive({name: 'yfc', job: {age: 6}});
let shallowReadonlyValue = shallowReadonly({name: 'yfc', job: {age: 6}});

console.log(isProxy(num)); // false
console.log(isProxy(obj)); // false
console.log(isProxy(people)); // true
console.log(isProxy(readOnlyValue)); // true
console.log(isProxy(shallowReactiveValue)); // true
console.log(isProxy(shallowReadonlyValue)); // true

console.log('------isReactive------');
console.log(isReactive(people));  // true
console.log(isReactive(shallowReactiveValue)); // true
console.log(isReactive(obj.value)); // true
console.log(isReactive(obj)); // false

console.log('------isReadonly------');
console.log(isReadonly(readOnlyValue)); // true
console.log(isReadonly(shallowReadonlyValue)); // true


console.log('------shallowRefValue------');
let shallowRefValue = shallowRef({ name: 'yfc' });

watchEffect(() => {
  console.log(shallowRefValue.value.name)
})

shallowRefValue.value.name = 'hl'; // 不会触发响应式
triggerRef(shallowRefValue);


shallowReactiveValue.name = 'hl';
shallowReactiveValue.job.age++ ;

shallowReadonlyValue.value = 'hl';
shallowReadonlyValue.job.age++;
console.log(shallowReadonlyValue);

let dog = reactive({ age: 2 });
let dogRef = ref({ age: 2 })

watchEffect(() => {
  console.log(dog);
})
let dogRow = toRaw(dog);
dogRow.age++;

let dogRefRow = toRaw(dogRef.value);
dogRefRow.age++;
watchEffect(() => {
  console.log(dogRef);
})
console.log(dogRefRow)
console.log(dogRef.value);
console.log(dog);


</script> 